<template>
	<view class="container">
		<view class="car-reg" v-if="iscar">
			<u-button shape="circle" type="warning" @click="onreg">请登录</u-button>
		</view>
		<view class="showcar" v-else>
			<view class="shopcar-top">
				<text>30天无忧退货</text><text>48小时快速退款</text><text>满88元免邮费</text>
			</view>
			<view class="shopcar-box" v-for="(item,index) in cartList" :key='index'>
				<view class="shop-title">

				</view>
				<view class="shop-nav">
					<view class="shop-nav-left">
						<u-checkbox-group>
							<u-checkbox @change="checkboxChange(index)" v-model="item.checked" :checked="item.checked">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="shop-nav-img">
						<image :src="item.picUrl"></image>
					</view>
					<view class="shop-nav-right">
						<view class="shop-nav-right-title">
							{{item.goodsName}}
						</view>
						<view class="shop-nav-right-text">
							<text v-for="(items,i) in item.specifications" :key='i'>{{items}}</text>
						</view>
						<view class="shop-nav-right-price">
							￥{{item.price}} <text class="right-price-text">×{{item.number}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="shopcar-footer">
				<view class="shopcar-footer-left">
					<u-checkbox-group>
						<u-checkbox @change='all' :checked="getcheck" v-model="isAll"></u-checkbox>
					</u-checkbox-group>
					全选 <text>{{cartTotal.checkedGoodsCount}}</text>
				</view>
				<view class="shopcar-footer-number">
					<!-- ￥<text>{{cartTotal.checkedGoodsAmount}}</text> -->
					￥<text>{{checkedGoodsAmount}}</text>
				</view>
				<view class="shopcar-footer-btn">
					<view class="btn">
						<u-button type="primary" text="删除" plain="true" shape="circle" @click="delcart"></u-button>
					</view>
					<view class="btn">
						<u-button type="warning" text="下单" plain="true" shape="circle" @click="jump"></u-button>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iscar: false,
				cartList: [], // 购物车商品列表
				cartTotal: {}, //购物车详情数据
				carlength: 0,
				// checkedGoodsAmount:0,//选中商品价格
				checkedGoodsCount:0,//选中商品数量
				getcheck:true,
			}
		},
		onLoad() {

		},
		computed:{
		checkedGoodsAmount(){
			let num=0
			for (let i = 0; i < this.cartList.length; i++) {
				if(this.cartList[i].checked==true){
					num+=this.cartList[i].number*this.cartList[i].price
				}
			}
			return num
		}
		},
		onShow() {
			let token = this.$store.state.Key
			if (token == '') {
				this.iscar = true
			} else {
				this.iscar = false
				this.$get(this.API.cart).then(res => {
					this.cartList = res.data.data.cartList
					this.cartTotal = res.data.data.cartTotal
					console.log(res.data.data)
				})
				
			}
		},
		
		methods: {
			onreg() {
				uni.navigateTo({
					url: '/pages/user/register/register'
				})
			},
			checkboxChange(e) { //修改选中
				this.cartList[e].checked =!this.cartList[e].checked
				this.$post(this.API.cartchecked,{
					cartIds:[this.cartList[e].id],
					isChecked:Number(this.cartList[e].checked)
				}).then(res=>{
					this.cartList = res.data.data.cartList
					this.cartTotal = res.data.data.cartTotal
					this.getcheck=this.cartList.every(item=>{
						return item.checked ==true
					})
				})
				

			},
			all(e){
				if(e==true){
					this.getcheck=true
					for (let i = 0; i < this.cartList.length; i++) {
						this.$post(this.API.cartchecked,{
							cartIds:[this.cartList[i].id],
							isChecked:Number(true)
						}).then(res=>{
							this.cartList = res.data.data.cartList
							this.cartTotal = res.data.data.cartTotal
						})
					}
				}else{
					this.getcheck=false
					for (let i = 0; i < this.cartList.length; i++) {
						this.$post(this.API.cartchecked,{
							cartIds:[this.cartList[i].id],
							isChecked:Number(false)
						}).then(res=>{
							console.log(res.data)
							this.cartList = res.data.data.cartList
							this.cartTotal = res.data.data.cartTotal
						})
				}
				}
			},
			delcart(){//delete
				let arr=[]
				for (let i = 0; i < this.cartList.length; i++) {
					if(this.cartList[i].checked==true){
						arr.push(this.cartList[i].id)
					}
				}
				// console.log(arr)
				this.$post(this.API.delete,{cartIds:arr}).then(res=>{
					uni.showToast({
						title: '删除成功',
						icon: 'none',
						duration: 2000
					});
					this.cartList=res.data.data.cartList
					this.cartTotal=res.data.data.cartTotal
				})
			},
			jump(){
				let arr=[]
				arr=this.cartList.filter((item)=>{
					return item.checked==true
				})
				if(arr==0){
					uni.showToast({
						title:'至少选择一个商品',
						icon: 'none',
						duration: 2000
					})
				}else{
					
					uni.navigateTo({
						
						url:'/pages/fastadd/fastadd'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.car-reg {
			margin: 0 auto;
			width: 30vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.shopcar-top {
			background-color: #FFFFFF;
			line-height: 5vh;
			font-size: 25rpx;
			text-align: center;
			display: flex;
			margin-bottom: 20rpx;

			text {
				flex: 1;
			}
		}

		height: 100vh;
		background-color: #f0f0f0;

		.shopcar-box {
			width: 90vw;
			margin: 10rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding-bottom: 20rpx;

			.shop-title {
				font-size: 30rpx;
				padding: 30rpx;
			}

			.shop-nav {
				display: flex;

				.shop-nav-left {
					width: 10vw;
					margin-left: 5vw;
					align-self: center;

				}

				.shop-nav-img {
					border-radius: 20rpx;
					overflow: hidden;

					image {
						width: 30vw;
						height: 15vh;
					}
				}

				.shop-nav-right {
					padding-left: 20rpx;
					width: 60vw;

					.shop-nav-right-title {
						padding-bottom: 10rpx;
					}

					.shop-nav-right-text {
						padding-bottom: 10rpx;
					}

					.shop-nav-right-price {
						padding-bottom: 10rpx;

						.right-price-text {
							float: right;
							margin-right: 30rpx;
						}
					}
				}
			}
		}

		.shopcar-footer {
			position: fixed;
			display: flex;
			width: 100vw;
			bottom: 0rpx;
			line-height: 10vh;
			background-color: #fff;
			justify-content: space-around;

			.shopcar-footer-left {
				display: flex;
				width: 20vw;
				margin-left: 10rpx;
			}

			.shopcar-footer-number {
				width: 20vw;
			}

			.shopcar-footer-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50vw;

				.btn {
					width: 20vw;

					&:first-child {
						margin-right: 20rpx;
					}
				}
			}

		}
	}
</style>
